<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8" />
        <title>Admantium - Admin Control Panel</title>
        
        <!-- CSSs -->
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/960.css" />
        <link rel="stylesheet" href="css/icons.css">
        <link rel="stylesheet" href="css/tipsy.css">
        <link rel="stylesheet" href="css/formalize.css">
        <link rel="stylesheet" href="css/prettyPhoto.css">
        <link rel="stylesheet" href="css/jquery-ui-1.8.18.custom.css">
        <link rel="stylesheet" href="css/chosen.css">
        <link rel="stylesheet" href="css/ui.spinner.css">
        <link rel="stylesheet" href="css/jquery.jqplot.min.css" />
        <link rel="stylesheet" href="css/fullcalendar.css" />
        <link rel="stylesheet" href="css/jquery.miniColors.css" />
        <link rel="stylesheet" href="css/elrte.min.css" />
        <link rel="stylesheet" href="css/elfinder.css" />
        <link rel="stylesheet" href="css/main.css" />

        <!-- JAVASCRIPTs -->
        <!--[if lt IE 9]>
            <script language="javascript" type="text/javascript" src="js/jqPlot/excanvas.min.js"></script>
            <script language="javascript" type="text/javascript" src="js/html5shiv.js"></script>
        <![endif]-->
        <script src="js/jquery.js"></script>
        <script src="js/jquery-ui-1.8.18.custom.min.js"></script>
        <script src="js/jquery.tipsy.js"></script>
        <script src="js/jquery.formalize.min.js"></script>
        <script src="js/jquery.modal.js"></script>
        <script src="js/prefixfree.min.js"></script>
        <script src="js/datables/js/jquery.dataTables.min.js"></script>
        <script src="js/jquery.prettyPhoto.js"></script>
        <script src="js/jquery.autogrowtextarea.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/jquery.fileinput.js"></script>
        <script src="js/chosen.jquery.min.js"></script>
        <script src="js/ui.checkBox.js"></script>
        <script src="js/ui.spinner.min.js"></script>
        <script src="js/jquery.loading.js"></script>
        <script src="js/jquery.path.js"></script>
        <script src="js/jqPlot/jquery.jqplot.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.pieRenderer.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.cursor.min.js"></script>
        <!-- # -->
        <script src="js/jqPlot/plugins/jqplot.highlighter.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.dragable.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.dateAxisRenderer.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.ohlcRenderer.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.trendline.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.pointLabels.min.js"></script>
        <!-- /# -->
        <script src="js/fullcalendar.min.js"></script>
        <script src="js/jquery.miniColors.min.js"></script>
        <script src="js/jquery.maskedinput-1.3.min.js"></script>
        <script src="js/jquery-ui-timepicker-addon.js"></script>
        <script src="js/elrte.min.js"></script>
        <script src="js/elfinder.min.js"></script>
        <script src="js/jquery.validate.min.js"></script>
        <script src="js/jquery.metadata.js"></script>
        <script src="js/main.js"></script>
        <script src="js/demo.js"></script>
    </head>
    <body>
        <!-- wrapper -->
        <div id="wrapper">
            <header>
                <div class="container_12">
                    <div class="grid_12">
                        <!-- navigation menu -->
                        <nav class="main-nav">
                            <ul>
                                <li class="active"><a href="dashboard.html" title="Dashboard"><span class="glyph cloud"></span> Dashboard</a></li>
                                <li>
                                    <a href="#" title="Elements"><span class="glyph archive"></span> Elements</a>
                                    <ul class="submenu">
                                        <li><a href="miscellaneous.html" title="Miscellaneous">Miscellaneous</a></li>
                                        <li><a href="form.html" title="Form">Form</a></li>
                                        <li><a href="notifications.html" title="Notifications">Notifications</a></li>
                                        <li><a href="icons.html" title="Icons">Icons</a></li>
                                        <li><a href="buttons.html" title="Buttons">Buttons</a></li>
                                        <li><a href="file-manager.html" title="File Manager">File Manager</a></li>
                                        <li><a href="calendar.html" title="Calendar">Calendar</a></li>
                                        <li><a href="960.html" title="960 Grid System">960 Grid System</a></li>
                                        <li><a href="boxes-and-typography.html" title="Boxes and Typography">Boxes and Typography</a></li>
                                    </ul>
                                </li>
                                <li><a href="gallery.html" title="Charts"><span class="glyph movie"></span> Gallery</a></li>
                                <li>
                                    <a href="#" title="Tables"><span class="glyph list"></span> Tables</a>
                                    <ul class="submenu">
                                        <li><a href="regular-tables.html" title="Regular Tables">Regular Tables</a></li>
                                        <li><a href="interactive-tables.html" title="Interactive Tables">Interactive Tables</a></li>
                                    </ul>
                                </li>
                                <li><a href="charts.html" title="Charts"><span class="glyph rating"></span> Charts</a></li>
                                <li><a href="login.html" title="Logout"><span class="glyph logout"></span> Logout</a></li>
                            </ul>
                        </nav>
                        <!-- /navigation menu -->

                        <!-- bar -->
                        <ul class="bar">
                            <li class="search">
                                <div>
                                    <form>
                                        <!-- the "L" value represents the icon, don't change -->
                                        <input type="submit" value="L" title="Click to search" class="tooltip glyph" />
                                        <input type="text" placeholder="What you want to search?" name="s" />
                                    </form>
                                </div>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="glyph opened-chat"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="glyph comment"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="glyph settings"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#" title="edit profile" class="tooltip">
                                    <span class="glyph user"></span>
                                    <span class="text">admin</span>
                                </a>
                            </li>
                        </ul>
                    </div>                
                </div>
            </header>

            <section id="main">
                <div class="container_12">
                    <div class="grid_12" id="content-top">
                        <div id="logo">
                            <img src="img/logo.png" alt="logo" />
                        </div>
                        <nav>
                            <ul>
                                <li>
                                    <a href="error-page.html">
                                        <span class="glyph close"></span>
                                        Error Page
                                    </a>
                                </li>
                                <li>
                                    <a href="#myModal" class="modal">
                                        <span class="glyph open-in-new-window"></span>
                                        Modal
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="glyph zoom-in"></span>
                                        Quick Post
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="glyph terminal"></span>
                                        Quick Action
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>

                    <div id="content">
                        <div class="extension top inleft breadcrumbs">
                            <nav>
                                <ul>
                                    <li><a href="#">optional</a> <span class="divider"></span></li>
                                    <li><a href="#">bread</a> <span class="divider"></span></li>
                                    <li><a href="#">crumbs</a> <span class="divider"></span></li>
                                    <li><a href="#">here</a></li>
                                </ul>
                            </nav>
                        </div>

                    <!-- The modal -->
                    <div class="box grid_8" id="myModal" hidden>
                        <header>
                            <div class="inner">
                                <div class="left title">
                                    <h1>Modal</h1>
                                </div>
                                <div class="right">
                                    <a href="#" class="close">close</a>
                                </div>
                            </div>
                        </header>
                    
                        <div class="box-content">
                            <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation <strong>ullamcorper suscipit</strong> lobortis nisl ut aliquip ex ea commodo consequat.</p>
                            <footer class="pane">
                                <a href="#" class="close bt red">Close modal</a>
                                <a href="#" class="bt blue">Custom button</a>
                            </footer>
                        </div>
                    </div>

                        <div class="main-box">

                            <!-- # Boxes and Typography -->
                            <header class="grid_12 head">
                                <h1>Boxes and Typography</h1>
                                <span class="divider"></span>
                            </header>

                          
                            <!-- Typography -->
                            <div class="box grid_7">
                                <header>
                                    <div class="inner">
                                        <div class="left title">
                                            <h1>Tabs</h1>
                                        </div>
                                        <div class="right">
                                            <nav>
                                                <ul>
                                                    <li class="active"><a href="#tab-1">Tab 1</a></li>
                                                    <li><a href="#tab-2">Tab 2</a></li>
                                                    <li><a href="#tab-3">Tab 3</a></li>
                                                </ul>
                                            </nav>
                                            <a href="#" class="close">close</a>
                                        </div>
                                    </div>
                                </header>

                                <div class="box-content">
                                    <div id="tab-1" class="tab">
                                    <p>Lorem <a href="#">ipsum dolor</a> sit amet, consectetuer adipiscing eluam erat volutpat. <a href="#">Ut wisi enim</a> ad minim veniam, quis nostrud exerci tation <strong>ullamcorper</strong> suscipit lobofeugiat nulla <strong>facilisis at vero eros et accumsan</strong> et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <em>Nam liber tempor</em> cum soluta nobis eleifend option congue nihil <a href="#">imperdiet doming id</a>.</p>
                                    </div>
                                    <div id="tab-2" class="tab">
                                        Tab 2
                                    </div>
                                    <div id="tab-3" class="tab">
                                        Tab 3<br />
                                        Yeeeah!
                                    </div>

                                    <footer class="pane">
                                        <a href="#" class="bt blue">Do something!</a>
                                        <a href="#" class="bt black">I don't want to!</a>
                                        <a href="#">So don't do it!</a>
                                    </footer>
                                </div>
                            </div>

                            <!-- Simple box -->
                            <div class="simple-box grid_5">
                                <div class="inner">
                                    <header>
                                        <h1>Simple Box</h1>
                                    </header>

                                    <div class="box-content">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et dignissim metus. Maecenas id augue ac metus tempus aliquam. Sed pharetra placerat est suscipit sagittis. Phasellus aliquam malesuada blandit. Donec adipiscing sem erat. Donec adipiscing sem erat. Nunc at dui id purus lacinia tincidunt sit amet vel erat. Maecenas id augue ac metus tempus aliquam. Sed pharetra placerat est suscipit sagittis. </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Typography -->
                            <div class="box grid_12">
                                <header>
                                    <div class="inner">
                                        <div class="left">
                                            <nav>
                                                <ul>
                                                    <li class="active"><a href="#tab-01">Tab 1</a></li>
                                                    <li><a href="#tab-02">Tab 2</a></li>
                                                    <li><a href="#tab-03">Tab 3</a></li>
                                                </ul>
                                            </nav>
                                        </div>
                                        <div class="right">
                                            <a href="#" class="close">close</a>
                                        </div>
                                    </div>
                                </header>

                                <div class="box-content">
                                    <div id="tab-01" class="tab">
                                    <p>Lorem <a href="#">ipsum dolor</a> sit amet, consectetuer adipiscing eluam erat volutpat. <a href="#">Ut wisi enim</a> ad minim veniam, quis nostrud exerci tation <strong>ullamcorper</strong> suscipit lobofeugiat nulla <strong>facilisis at vero eros et accumsan</strong> et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <em>Nam liber tempor</em> cum soluta nobis eleifend option congue nihil <a href="#">imperdiet doming id</a>.</p>
                                    </div>
                                    <div id="tab-02" class="tab">
                                        Tab 2
                                    </div>
                                    <div id="tab-03" class="tab">
                                        Tab 3<br />
                                        Yeeeah!
                                    </div>
                                </div>
                            </div>

                            <!-- Typography -->
                            <div class="box grid_12">
                                <header>
                                    <div class="inner">
                                        <div class="left title">
                                            <h1>Typography</h1>
                                        </div>
                                        <div class="right">

                                            <a href="#" class="close">close</a>
                                        </div>
                                    </div>
                                </header>
                            
                                <div class="box-content">
                                    <div class="columns">
                                        <div class="left">
                                            <ol class="ol">

                                                <li>List item one</li>
                                                <li>List item two</li>
                                                <li>List item tree</li>
                                                <li>List item four</li>
                                                <li>List item five</li>
                                                <li>List item six</li>

                                                <li>List item seven</li>
                                            </ol>
                                        </div>
                                        <div class="right">
                                            <ul class="ul">
                                                <li>List item one</li>
                                                <li>List item two</li>

                                                <li>List item tree</li>
                                                <li>List item four</li>
                                                <li>List item five</li>
                                                <li>List item six</li>
                                                <li>List item seven</li>
                                            </ul>

                                        </div>
                                    </div>
                                    <h1>Header 1</h1>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

                                    <h2>Header 2</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

                                    <h3>Header 3</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

                                    <h4>Header 4</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

                                    <h5>Header 5</h5>

                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

                                    <h6>Header 6</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

                                <blockquote>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</blockquote>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <!-- /wrapper -->

        <footer>
            <div class="container_12">
                <p>&copy; Copyright 2012 - Your Company | Lead Developer - <a href="#" target="_blank">Your name</a></p>
            </div>
        </footer>
    </body>
</html>
